<template>
  <div class="dashboard-container">
    <div class="app-container">
      <pageTool>
        <template #after>
          <el-button type="primary" size="mini" @click="permissionFn('0',1)">{{ $t('route.addpermission') }}</el-button>
        </template>
      </pageTool>
      <el-table
        :data="permissionList"
        row-key="id"
        style="width: 100%"
        border
        default-expand-all
      >
        <el-table-column
          type="index"
          label="序号"
          width="200"
          align="center"
        /> <el-table-column
          prop="name"
          label="名称"
          width="250"
        /> <el-table-column
          prop="code"
          label="标识"
          width="250"
        />
        <el-table-column
          prop="description"
          label="描述"
          width="200"
        />
        <el-table-column
          prop="address"
          label="操作"
        >
          <template #default="{row}">
            <el-link v-if="row.type===1" @click="permissionFn(row.id,2)"><i class=" el-icon-folder-add" />添加 </el-link>
            <el-link style="margin:30px" @click="permissionEdit(row.id)"><i class=" el-icon-edit" />编辑 </el-link>
            <el-link style="color:red" @click="delFn(row.id)"><i class=" el-icon-delete" />删除 </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible="showDialog" :title="title" @close="close">
      <el-form ref="form" :label-position="labelPosition" label-width="80px" :rules="rules" :model="formLabelAlign" style="padding:30px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formLabelAlign.code" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formLabelAlign.description" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="formLabelAlign.envisible"
            active-value="1"
            inactive-value="0"
            active-color="red"
            inactive-color="black"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row :gutter="10" type="flex" justify="center">
          <el-button type="primary" @click="btnOk">确定</el-button>
          <el-button @click="close">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getPermission, addPermission, getPermissionDetail, editPermission, delPermission } from '@/api/permission'
import { getdataTree } from '@/utils/gettree'
export default {
  name: 'Permission',
  data() {
    return {
      permData: [],

      permissionList: [],
      showDialog: false,
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        description: '',
        type: '', // 确定当前是页面权限还是功能权限 操作权限是2 访问权限是1
        pid: '', // 一级的pid 是0 添加上去的节点在哪个父节点下面
        envisible: '1'
      },
      rules: { name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入权限标识', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title() {
      return this.formLabelAlign.type === 1 ? '新增权限' : '编辑权限'
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    // 删除按钮
    async delFn(id) {
      console.log(id)
      await this.$confirm('确定删除吗?')
      await delPermission(id)
      this.$message.success('删除成功')
      this.getPermissionList()
    },
    // 编辑权限按钮
    async permissionEdit(id) {
      console.log(id)
      this.formLabelAlign = await getPermissionDetail(id)
      this.showDialog = true
    },
    // 关闭弹层重置数据 表单
    close() {
      // 重置数据
      this.formLabelAlign = {
        name: '',
        region: '',
        description: '',
        type: '', // 确定当前是页面权限还是功能权限 操作权限是2 访问权限是1
        pid: '', // 一级的pid 是0 添加上去的节点在哪个父节点下面
        envisible: '1' }
      // 重置表单
      this.$refs.form.resetFields()
      this.showDialog = false
    },
    async btnOk() {
      await this.$refs.form.validate()
      if (this.formLabelAlign.id) {
        await editPermission(this.formLabelAlign)
        this.$message.success('修改权限成功')
      } else {
        await addPermission(this.formLabelAlign)
        this.$message.success('添加权限成功')
      }

      this.close()
      this.getPermissionList()
    },
    permissionFn(pid, type) {
      this.formLabelAlign.type = type
      this.formLabelAlign.pid = pid
      this.showDialog = true
    },
    // 关闭弹层
    // close() {
    //   this.showDialog = false
    // },
    // 获取权限列表并处理树形
    async getPermissionList() {
      this.permissionList = getdataTree(await getPermission(), '0')
    }
  }
}
</script>

<style>

</style>
